<template>
  <el-dialog v-model="dialogFormVisible" title="新增管理员" width="720px" @open="diaOpen" @close="diaClose">
    <el-form
        ref="formRef"
        :model="FromData"
        status-icon
        label-position="right"
        label-width="100px"
        class="diaForm"
    >
      <el-form-item
          label="管理员姓名:"
          prop="AdminName"
          :rules="[
        { min:2, message: '请输入至少两个字符串',trigger:'blur' },
        { required: true, message: '请输入至少两个字符串',trigger:'blur'},

      ]"
      >
        <el-input v-model="FromData.AdminName" class="diaInput"></el-input>
      </el-form-item>
      <el-form-item
          label="用户名:"
          prop="UserName"
          :rules="[
        { min:4, message: '请输入至少4个字符串',trigger:'blur' },
        { required: true, message: '请输入至少4个字符串',trigger:'blur' },

      ]"
      >
        <el-input v-model="FromData.UserName" class="diaInput"></el-input>
      </el-form-item>
      <el-form-item
          label="所属角色:"
          prop="Actor"
          :rules="[
        { required: true, message: '请至少选择一个角色',trigger:'change' },

      ]"
          v-if="isShowActor"
      >
        <el-cascader
            ref="cascader"
            :options="prop.roleList"
            :props="props"
            clearable
            v-model="FromData.Actor"
            style="width:364px;"
            popper-class="diaNav"
            placeholder=" "/>
      </el-form-item>
      <el-form-item
          label="用户密码:"
          prop="Password"
          :rules="[
        {min:6, message: '请输入至少6个字符串',trigger:'blur' },
        {required: true, message: '请输入至少6个字符串',trigger:'blur' },
      ]">
        <el-input v-model="FromData.Password" class="diaInput" type="password"></el-input>
      </el-form-item>
      <el-form-item
          label="确认密码:"
          prop="ConfirmPass"
          :rules="[
        {validator:checkPass,trigger: 'blur'}
      ]"
      >
        <el-input v-model="FromData.ConfirmPass" class="diaInput" type="password"></el-input>
      </el-form-item>
      <el-form-item
          label="排序:"
          prop="Sort"
          :rules="[
        { required: true, message: '请输入至少一个数字',trigger:'blur' },
      ]">
        <el-input v-model="FromData.Sort" class="diaSort"></el-input>
      </el-form-item>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="Submit(formRef)"
        >确定</el-button
        >
      </span>
    </el-form>
  </el-dialog>

</template>
<script setup>
import {defineEmits, nextTick, onMounted, reactive, ref} from "vue";
import {register, getRoleLise} from "../../../HTTP/api";
import {ElMessage} from "element-plus";
const formRef = ref()
const cascader = ref()
const ScrollRole=ref(null)
const dialogFormVisible = ref(false)
const FromData = reactive({
  AdminName: "",
  UserName: "",
  Actor: "",
  Password: "",
  ConfirmPass: "",
  Sort: "100"
})
let isShowActor = ref(true)
let page = 1
const props = {multiple: true}
const prop = reactive({
  roleList: []
})
const define = defineProps(["AdminInfo"])
defineExpose({
  dialogFormVisible
})
//检查密码
const checkPass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('密码不能为空'))
  } else if (value !== FromData.Password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

//获取角色列表
function getRoleLiseData(page) {
  getRoleLise({page}).then(res => {
    if (res.code === 2000) {
      res.data.data.forEach(item => {
        prop.roleList.push({value: item.role_id, label: item.role_name})
      })
    }
  })
}

const emit = defineEmits(['EditSuccess'])
//提交
const Submit = (formRef) => {
  if (!formRef) return
  formRef.validate((valid) => {
    if (valid) {
      let actorArr = []
      if (isShowActor.value) {
        cascader.value.getCheckedNodes().forEach(item => {
          actorArr.push(item.data.value)
        })
      }
      if (define.AdminInfo) {
        define.AdminInfo.roles.forEach(item => {
          actorArr.push(item.role_id)
        })
      }
      //发送请求的数据
      let data = define.AdminInfo ?
          {
            name: FromData.UserName,
            pw: FromData.Password,
            roles: actorArr,
            admin_id: define.AdminInfo.admin_id
          } :
          {
            name: FromData.UserName, pw: FromData.Password, roles: actorArr
          }
      register(data).then(res => {
        console.log(res)
        if (res.code === 2000) {
          ElMessage({
            type: "success",
            message: "操作成功"
          })
          emit('EditSuccess', true)
          dialogFormVisible.value = false
        } else {
          ElMessage.error("操作失败")
          emit('EditSuccess', false)
        }
      }).catch(reason=>{
        dialogFormVisible.value = false
      })
    } else {
      return false
    }
  })
}
//打开时回调
const diaOpen = () => {
  console.log(cascader.value)
  getRoleLiseData()
  if (define.AdminInfo) {
    FromData.UserName = define.AdminInfo.admin_name
    FromData.AdminName = "系统管理员"
    FromData.Password = define.AdminInfo.pw
    FromData.ConfirmPass=""
    isShowActor.value = false
  } else {
    nextTick(() => {
      FromData.AdminName = ""
      FromData.UserName = ""
      FromData.Password = ""
      FromData.ConfirmPass=""
      isShowActor.value = true
    })

  }
}
const diaClose=()=>{
  formRef.value.clearValidate()
}

</script>
<style scoped>
.diaInput {
  width: 364px;
  height: 40px;
}

.diaSort {
  width: 88px;
  height: 40px;
}

.diaForm {
  margin-left: 100px;
}

.el-form-item {
  margin-bottom: 30px;
}

.dialog-footer {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
</style>
